import {
  CloseOutlined,
  EllipsisOutlined,
  RobotFilled,
  SendOutlined,
  SettingOutlined
} from "@ant-design/icons"
import { Button, Card, Form, Input, Space } from "antd"
import { useForm } from "antd/es/form/Form"
import useMessage from "antd/es/message/useMessage"
import React, {
  memo,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
  type CSSProperties
} from "react"
import Draggable from "react-draggable"

import type { PlasmoMessaging } from "@plasmohq/messaging"
import { useMessage as useMsg, usePort } from "@plasmohq/messaging/hook"

import DropDownMenu from "~components/DropDownMenu/DropDownMenu"
import { DogIconData, TokenIconData } from "~components/iconData"
import Tooltip from "~components/Tooltip/Tooltip"
import useLoading from "~hook/useLoading"
import { useChatStore } from "~store/chatStore"
import { useTokenStroe } from "~store/tokenStore"
import { useUIcontentStore } from "~store/uicontentStore"
import { getStyleContainerRoot } from "~util"

import MainChatView from "./MainChatView/MainChatView"
import OICardStyle from "./MainContent.module.css"
import OptionView from "./OptionView/OptionView"
import TokenView from "./TokenView/TokenView"

const HelloAI = memo(
  (params: { onToken: () => void; style?: CSSProperties }) => {
    return (
      <div style={params.style}>
        <h1 className="text-center">Hello!OI-AI</h1>
        <p className="text-center">
          Please Set Your
          <Button className="pl-[.2rem]" type="link" onClick={params.onToken}>
            Accesstonken
          </Button>
        </p>
      </div>
    )
  }
)
const MainContent = memo(() => {
  const _token = useTokenStroe((state) => state.accessToken.access_token)
  const token = useMemo(() => _token, [_token])

  const aiSource = useTokenStroe((state) => state.tokenType.aiSource)

  const setShowUI = useUIcontentStore((state) => state.setShowUI)

  const width = useUIcontentStore((state) => state.width)
  const height = useUIcontentStore((state) => state.height)
  const [viewOpen, setViewOpen] = useState<boolean>(false)
  const [optionOpen, setOptionOpen] = useState<boolean>(false)

  const x = useUIcontentStore((state) => state.x)
  const y = useUIcontentStore((state) => state.y)
  const setContentUI = useUIcontentStore((state) => state.setContentUI)
  const optionStyle = {
    width: width + "px",
    height: height + "px"
  }

  const onClose = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
    e.stopPropagation()
    setShowUI(false)
  }

  const onSet = () => {
    setOptionOpen((state) => !state)
  }
  const onSetToken = () => {
    setViewOpen((state) => !state)
  }

  const onStop = (e, data) => {
    e.stopPropagation()
    setContentUI({ x: data.lastX, y: data.lastY })
  }

  return (
    <Draggable
      defaultPosition={{ x, y }}
      handle=".ant-card-head-title"
      bounds="body"
      onStop={(e, data) => onStop(e, data)}>
      <div className=" fixed">
        <Card
          className={OICardStyle.OIBorderShadow + " "}
          classNames={{
            body: OICardStyle.OIcardpb
          }}
          title={
            <div className="flex justify-center items-center">
              <div className="text-base mr-auto ">
                <RobotFilled />
                <span className=" italic ">
                  {aiSource ? aiSource : "OI-TOOL"}!
                </span>
              </div>
            </div>
          }
          extra={
            <Button type="link" onClick={(e) => onClose(e)} className="ml-auto">
              <CloseOutlined className="text-black"></CloseOutlined>
            </Button>
          }
          actions={[
            <Tooltip title="Token Setting">
              <div onClick={onSetToken}>
                <TokenIconData className=" text-base !important" />
              </div>
            </Tooltip>,
            <Tooltip title="UI Setting">
              <SettingOutlined key="setting" onClick={onSet} />
            </Tooltip>,
            <DropDownMenu>
              <div onClick={(e) => e.preventDefault()}>
                <EllipsisOutlined key="ellipsis" />
              </div>
            </DropDownMenu>
          ]}>
          <div style={optionStyle}>
            {token ? (
              <MainChatView></MainChatView>
            ) : (
              <HelloAI style={optionStyle} onToken={onSetToken}></HelloAI>
            )}
          </div>
        </Card>

        <TokenView open={viewOpen} onCancel={onSetToken}></TokenView>
        <OptionView open={optionOpen} onCancel={onSet}></OptionView>
      </div>
    </Draggable>
  )
})
export default MainContent
